<template>
    <div class="Money" v-loading="loading">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">钱包</p>
        </Top>

        <!--账单头部-->
        <div class="chargeHead clearfix fixed" v-if="scrollTabShow">
            <p>交易明细</p>
            <span class="filterBox" @click="maskShow=true">筛选<svg class="icon child-2" aria-hidden="true"><use xlink:href="#icon-shaixuan"></use></svg></span>
        </div>

        <div class="top-main">

            <cube-scroll
                         :listenScroll="true"
                         @scroll="scrollHandle"
                         ref="scroll"
                         :data="list"
                         :options="scrollOptions"
                         @pulling-up="onPullingUp">

                <div ref="topWrapper">

                    <!--头-->
                    <div class="money-head">
                        <img src="../../assets/exam/money-bag.png" alt="" class="bag" />
                        <p class="tips">可提现金额</p>
                        <p class="count">￥{{cost_money}}</p>
                        <p class="wait-count">待结算金额：￥{{cast_money}}</p>
                        <button @click="$router.push('/bag/cash')">提现</button>
                    </div>
                    <!--账单头部-->
                    <div class="chargeHead clearfix">
                        <p>交易明细</p>
                        <span class="filterBox" @click="maskShow=true">筛选<svg class="icon child-2" aria-hidden="true"><use xlink:href="#icon-shaixuan"></use></svg></span>
                    </div>

                </div>

                <!--账单明细列表-->
                <ul class="chargeList" v-if="list.length>0">

                    <li 
                        class="items clearfix animated flipInX"
                        :style="{animationDelay:delay(index)}"
                        v-for="(item,index) in list"
                        :key="index">
                        <img :src="item.member_avatar" alt="">
                        <div class="info">
                            <h2>{{item.member_name}}</h2>
                            <p style="color:#999">{{item.add_time}}</p>
                            <p>{{item.lession_name}}</p>
                            <p style="color:#3d90ee" v-if="item.cost_status===0">剩余时间：{{ timeCount(item.cost_time) }}</p>
                            <p style="color:#3d90ee" v-if="item.cost_status===2">取消结算原因：{{item.fail_reason}}</p>
                        </div>
                        <div class="right">
                            <h4>{{item.cost_status_word}}</h4>
                            <p :class="{'color-1':item.cost_status===0,'color-2':item.cost_status===1,'color-3':item.cost_status===2}">{{item.get_price}}</p>
                        </div>
                    </li>

                    <!--无数据时显示-->
                    <li class="mid" v-if="list.length<=0">
                        <div class="nodata animated fadeIn">
                            <img src="../../assets/huawa-off.png" alt="" />
                            <p>暂无数据..</p>
                        </div>
                    </li>
                </ul>

            </cube-scroll>

        </div>


        <!--筛选弹窗-->
        <transition name="bounce-up">
            <div class="mask" v-if="maskShow" @click.self="maskShow=false">
                <ul class="filterWindow">
                    <li @click="filter(-1)" :class="{on:cost_status===-1}">全部</li>
                    <li @click="filter(0)" :class="{on:cost_status===0}">待结算</li>
                    <li @click="filter(1)" :class="{on:cost_status===1}">已结算</li>
                    <li @click="filter(2)" :class="{on:cost_status===2}">结算取消</li>
                </ul>
            </div>
        </transition>

    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Money',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,
                cost_money:0,//可提现金额
                cast_money:0,//待结算金额
                list:[],//充值列表数据
                maskShow:false,//遮罩
                cost_status:-1,////-1.全部 0.待结算 1.已结算 2.结算取消

                scrollTabShow:false,

                /*分页*/
                currentPage:2,//当前页

                /*上拉加载*/
                scrollOptions: {
                    pullUpLoad: {
                        threshold: 20,
                        txt: {
                            more: '加载更多..',
                            noMore: '没有更多了..'
                        },
                        stopTime:1000
                    }
                },
            }
        },
        created(){
            this.loading = true;
            this.Posthttp('/?method=flower.user.costlist',{member_id:this.getMemberId(),cost_status:-1,page:1},(res)=>{
                this.loading = false;
                if(JSON.parse(res.bodyText).status ===1){
                    this.list = JSON.parse(res.bodyText).data.list;
                    this.cost_money = JSON.parse(res.bodyText).data.cost_money;
                    this.cast_money = JSON.parse(res.bodyText).data.cast_money;
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });
        },
        methods:{
            timeCount(cost_time){
                let timestamp = Date.parse(new Date())/1000, //当前时间戳
                    restTime = cost_time - timestamp, //剩余时间戳
                    timeShow = ''
                if( Math.floor(restTime)>0 ){
                    let day = Math.floor(restTime / 86400);
                    restTime = restTime % 86400;
                    let hour = Math.floor(restTime / 3600);
                    restTime = restTime % 3600;
                    let minute = Math.floor(restTime / 60);
                    restTime = restTime % 60;
                    let second = restTime;
                    timeShow =  day + '天' + hour + '小时' + minute + '分' + second + '秒'
                }else{
                    timeShow = '已失效'  
                }
                return timeShow
            },
            //筛选
            filter(index){
                this.maskShow = false;
                this.loading = true;
                this.Posthttp('/?method=flower.user.costlist',{member_id:this.getMemberId(),cost_status:index,page:1},(res)=>{
                    this.loading = false;
                    this.currentPage = 2

                    if(JSON.parse(res.bodyText).status ===1){
                        this.list = JSON.parse(res.bodyText).data.list;
                        this.cost_status = index;
                    }else{
                        this.cost_status = -1;
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },

            //加载更多
            onPullingUp(){

                this.Posthttp('/?method=flower.user.costlist',{member_id:this.getMemberId(),cost_status:this.cost_status,page:this.currentPage},(res)=>{
                    let Dlength = JSON.parse(res.bodyText).data.list.length

                    if(Dlength>0){
                        this.currentPage++
                        this.list = this.list.concat(JSON.parse(res.bodyText).data.list)
                    }else{
                        this.$refs.scroll.forceUpdate()
                    }
                })
            },
            //滚动监听
            scrollHandle(pos){

                let h = this.getDefaultStyle(this.$refs.topWrapper,'height')

                this.scrollTabShow = Math.abs(pos.y) >= parseFloat(h)?true:false

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Money {
        background-color: #f2f2f2;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        color: #666;
        padding-top: .8rem;
        /**/
        .money-head{
            width: 100%;
            height: 5rem;
            background-color: #de6940;
            color: #fff;
            text-align: center;
            padding-top: .4rem;
            img.bag{
                width: .9rem;
                height: 1.1rem;
            }
            .count{
                font-size: .48rem;  
            }
            .tips{
                opacity: .9;
                margin: .2rem 0 .16rem;
            }
            .wait-count{
                margin-top: .5rem;
            }
            button{
                width: 4.76rem;
                height: .8rem;
                background-color: #fff;
                border-radius: .4rem;
                border: 0;
                outline: none;
                font-size: .28rem;
                margin-top: .4rem;
            }
        }
        /*筛选弹窗*/
        .filterWindow{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #fff;
            text-align: center;
            li{
                height: .8rem;
                line-height: .8rem;
                border-top: 1px solid #e4e4e4;
                &.on{
                    background-color: #de6940;
                    border-top: 1px solid #de6940;
                    color: #fff;
                }
            }
        }
        /**/
        .chargeHead{
            width: 100%;
            background-color: #fff;
            font-size: .26rem;
            color: #333;
            height: .8rem;
            line-height: .8rem;
            margin-top: .2rem;
            border-bottom: 1px solid #e4e4e4;
            &.fixed{
                position: fixed;
                top: .8rem;
                left: 0;
                z-index: 10;
                margin: 0;
            }
            p{
                width: 80%;
                float: left;
                border-right: 1px solid #e4e4e4;
                padding-left: .2rem;
            }
            .filterBox{
                width: 20%;
                float: right;
                text-align: right;
                padding-right: .2rem;
                .icon{
                    font-size: .3rem;
                }
            }
        }

        /**/
        .chargeList{
            padding: 0 .2rem;
            background-color: #fff;
            width: 100%;
            padding-bottom: .4rem;
            .loadmore{
                border-bottom: 0;
            }
            li.items{
                position: relative;
                padding: .2rem;
                border-bottom: 1px solid #e4e4e4;
                /**/
                img{
                    width: 1rem;
                    height: 1rem;
                    border-radius: 100%;
                    float: left;
                }
                /**/
                .info{
                    width: 4rem;
                    padding: 0 .2rem;
                    float: left;
                    h2{
                        font-weight: 600;
                        font-size: .3rem;
                        color: #333;
                        padding-top: .2rem;
                    }
                    p{
                        font-size: .22rem;
                        color: #777;
                        margin-top: .16rem;
                        width: 100%;
                    }
                }
                /**/
                .right{
                    width: 1rem;
                    text-align: right;
                    position: absolute;
                    right: .2rem;
                    top: 50%;
                    transform: translateY(-50%);
                    h4{
                        color: #666;
                    }
                    p{
                        font-size: .32rem;
                        margin-top: .36rem;
                    }
                    .color-1{
                        color: #ef9d0e;
                    }
                    .color-2{
                        color: #e5514f;
                    }
                    .color-3{
                        color: #666666;
                    }
                }
            }
        }
    }
</style>
